<template>
  <mu-appbar :title="title" class="navView">
    <mu-icon-button :icon="leftIcon" slot="left" @click="leftClick"/>
    <mu-icon-button :icon="rightIcon" slot="right" @click="rightClick"/>
  </mu-appbar>
</template>

<script>
  //    navLeftClick()
  //    navRightClick()
  export default {
    name: 'UINavigation',
    props: {
      title: {
        type: String,
        default: ' '
      },
      leftIcon: {
        type: String,
        default: 'chevron_left_black'
      },
      rightIcon: {
        type: String,
        default: ' '
      }
    },
    created: function () {
    },
    methods: {
      leftClick: function () {
        this.$emit('navLeftClick')
      },
      rightClick: function () {
        this.$emit('navRightClick')
      }
    }
  }
</script>

<style>
  .navView {
    position:fixed;
    top:0px;
    height: 40px;
  }
</style>
